.my_hobby {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    justify-content: center;
  }

  .my_hobby .headline_wrap {
    margin: 1% 1%;
    flex-basis: 80%;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0);
  }

  .my_hobby .hobby_piece {
    margin: 3% 2%;
    flex-basis: 40%;
    border-radius: 10px;
    background-color: rgba(238, 238, 238);
    display: flex;
    justify-content: space-between
  }

  .my_hobby .hobby_piece .visual_per {
    margin: 0;
    width: 0;
    border-radius: 10px;
  }

  .my_hobby .hobby_piece .visual_per p {
    /* 让文字离左边框有一定距离 */
    margin-left: 5px;
    text-align: left;

    width: 100%;
    color: rgba(238, 238, 238);

    /* 文字溢出时隐藏并添加...*/
    overflow: hidden;
    text-overflow: ellipsis
  }

  .my_hobby div .percent {
      color:rgb(32, 31, 31)
  }

  .my_hobby .hobby_piece .vp1 {

    background-color: rgba(217, 0, 145);
  }

  .my_hobby .hobby_piece .vp2 {

    background-color: rgba(157, 54, 217);
  }

  .my_hobby .hobby_piece .vp3 {

    background-color: rgba(47, 136, 208);
  }

  .my_hobby .hobby_piece .vp4 {

    background-color: rgba(49, 173, 189);
  }

  .my_hobby .hobby_piece .vp5 {

    background-color: rgba(91, 161, 94);
  }

  .my_hobby .hobby_piece .vp6 {
    background-color: rgba(217, 203, 75);
  }